<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>嵌套路由 </title>
    <!-- 
        实际应用页面，通常由多层嵌套的组件组合而成，例如：首页组件中，还嵌套登录和注册模块。
        /home/login 或者 /home/reg
     -->
</head>

<body>
    <div id="app">
        <p>
            <!-- 使用router-link组件导航 to属性指定导航地址 -->
            <router-link to="/home">home</router-link>
            <router-link to="/news">news</router-link>
        </p>
        <!-- 路由出口（路由匹配到的组件将被渲染到这里 -->
        <router-view></router-view>
    </div>
    <script src="https://unpkg.com/vue@next"></script>
    <script src="https://unpkg.com/vue-router@4.0.6"></script>
    <script>
        //1.定义路由组件
    const Home = {
        template:
            `<div>
                <h2>首页</h2>
                <router-link to="/home/login">登录</router-link><br>
                <router-link to="/home/reg">注册</router-link>
                <router-view></router-view>
            </div>`
    }
    const News = {
        template:'<div>新闻</div>'
    }
    const Login = {
        template:'<div>登录</div>'
    }
    const Reg = {
        template:'<div>注册</div>'
    }
     //2.定义路由规则对象 ，每个路由只能映射一个组件
    // 路由重定向：修改路由配置 redirect:'/home'
    const routes = [
        {
            path:'/',//根路由
            redirect:'/home'//把根路由重定向到home
        },
        {
            path:'/home',
            component:Home,
            children:[//配置子路由
                {
                    path:'/home',
                    redirect:'/home/login'
                },
                {
                    path:'/home/login',
                    component:Login
                },
                {
                    path:'/home/reg',
                    component:Reg
                }
            ]
        },
        {
            path:'/news',
            component:News 
        }
    ]
     //3.创建router实例
    const router  = VueRouter.createRouter({
        history:VueRouter.createWebHashHistory(),
        routes:routes
    })

     Vue.createApp({
        
       }).use(router).mount('#app')
    </script>
</body>

</html>
